<template>
	<view class="wrap" @tap="toLogin">
	  <!-- 第一个模块 -->
	  <view class="bannerSyl">
		  <view class="searchWrap">
			  <view class="searchInfo">
				  <text class="searchPlace">他说</text>
				  <view class="line"></view>
				  <input v-model="searchVls" class="searchIpt" confirm-type = "search" @confirm="searchFun" type="text" placeholder="情感解析" >
			  </view>
			  <!-- <view style="display: flex; align-items: center;" > -->
			  <view style="display: none; align-items: center;" >
				  <image style="margin-right: 20rpx;" class="sign" :src="getImgUrl('/img/allImgs/home/sign.svg')" mode=""></image>
				  <image class="sign" :src="getImgUrl('/img/allImgs/home/add.svg')"  @click="showNav" />
			  </view>	
		  </view>
		  <view class="tabNavWrap" :style="{display: show? 'block': 'none'}">
			  <view class="tabs" v-for="(item,idx) in addArr" :key="idx" @tap="changeUrl(item.url)">
				  <image :src="item.img" mode="aspectFill" lazy-load="false" />
				  <view class="tabInfo">{{ item.title }}</view>
			  </view>
		  </view>
		  <view  class="bannerImg" >
			  <view class="wishing" @tap="wishing"></view>
			  <view class="divinatory" @tap="divination"></view>
			  <view class="votive" @tap="votive"></view>
			  <view v-if="wishingShow" style="left: 54rpx;"  class="btnImg" @tap="wishing">许愿池</view>
			  <view v-if="divinationShow" style="font-size: 32rpx; font-weight: 700; left: calc(50% - 130rpx);"  class="btnImg centerImg" @tap="divination">排盘摇卦</view>
			  <view v-if="votiveShow" style="right: 54rpx;"  class="btnImg" @tap="votive">还愿池</view>
		  </view>
		  <view class="bannerMenu" v-if="everyDayShow">
			  <view class="menuTitle">
				  每日一测，随测随知
			  </view>
			  <view class="menuList">
				  <view class="menuImg" v-for="(item,index) in menuData" :key="index" @tap="changeUrl(item.url)"  v-if="item.show" :style="{marginLeft: index == 0 ? 0 : '40rpx'}">
					  <image style="width: 70rpx; height: 70rpx;" :src="item.menuImg" mode=""></image>
					  <view  class="menuDetail">
						  {{ item.menu }}
					  </view>
				  </view>
			  </view>
		  </view>
		  
	  </view>
	  <!-- 第二个模块 用户时运 -->
	  <view class="details" v-if="constellation">
		  <view class="user">
			  <view class="userLuck">
				  <image class="avatar" :src="avatar != null? avatar: 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'"></image>
				  <view class="userInfo">{{ info.constellation}}</view>
				  <image class="changeImg" src="https://ctrlsoft.net.cn/app_static/hesaid/img/forum/change.svg"></image>
				  <view class="timeLuck">的今日时运</view>
			  </view>
			  <image class="shareImg" :src="getImgUrl('/img/allImgs/home/share.svg')" style="display:none;"></image>
		  </view>
		  <view class="progressWrap">
			  <view class="detailsLeft">
				  <view class="luckInfo" v-for="(item,index) in progressData" :key="index">
					  <image v-if="item.img" class="luckImg" :src="item.img"></image>
					  <view class="progressDetails">
						  <view class="progressDesc">
							  <view>{{ item.name }}</view>
							  <view>{{ item.progressPercent }}</view>
						  </view>
						  <Progress :percent="item.progressPercent" />
					  </view>
				  </view>
			  </view>
			  <view class="detailsRight">
				  <view class="dashWrap">
					  <view class="count">{{ info.todaySIndex }}</view>
					  <view class="forBlock" v-for="(item,index) in 20" :style="{ transform: `rotate(${Number(index * 10)+266}deg)`}">
					  </view>
					  <view class="forBlock" v-for="(item,index) in percent" :style="{ transform: `rotate(${Number(index * 10)+266}deg)`, zIndex: '9999',background:`rgba(255,126,0,${Number(index)*0.2})`}">
					  </view>
				  </view>
			  </view>
		  </view>
		  <view class="luckyWrap">
			  <view class="luckyColorWrap">
				  <image class="luckyColorImg" :src="info.colorPicture" mode="aspectFill" lazy-load="false"></image>
				  <view class="luckyColorInfoWrap">
					  <view class="luckyColor">{{ info.luckyColor ? info.luckyColor  : 0 }}</view>
					  <view class="luckyColorDetail">幸运颜色</view>
				  </view>
			  </view>
			  <view class="vertical"></view>
			  <view class="luckyColorWrap">
				  <image class="luckyColorImg" :src="info.luckyNumberPicture" mode="aspectFill" lazy-load="false"></image>
				  <view class="luckyColorInfoWrap">
					  <view class="luckyColor">{{ info.number ? info.number : 0 }}</view>
					  <view class="luckyColorDetail">幸运数字</view>
				  </view>
			  </view>
			  <view class="vertical"></view>
			  <view class="luckyColorWrap">
				  <image class="luckyColorImg" :src="info.constellationPicture" mode="aspectFill" lazy-load="false"></image>
				  <view class="luckyColorInfoWrap">
					  <view class="luckyColor">{{ info.qfriend ? info.qfriend : 0 }}</view>
					  <view class="luckyColorDetail">速配星座</view>
				  </view>
			  </view>
		  </view>
		  <view class="desc">
			  {{ info.summary ? info.summary : '' }}
		  </view>
	  </view>
	  <!-- 广告 -->
	  <!-- <image class="advertisingImg" :src="getImgUrl('/img/advertising.png')" mode="aspectFill"></image> -->
  
	  <!-- 整体内容部分 -->
	  <view class="containerWrap">
		  <view class="tabWrap">
			  <view class="tabs" @tap="changeTab('1')" :style="{color: current == 2 ? '#FF7F22' : '#555555'}">他说</view>
			  <!-- <view class="tabs" @tap="changeTab('2')" :style="{color: current == 2 ? '#FF7F22' : '#555555'}">全部</view> -->
			  <view class="chooseTab" style="left: 50%; margin-left: -120rpx;"></view>
		  </view>
		  <view class="warn">温馨提示：内容代表博主个人观点，仅供娱乐参考</view>
  
		  <view class="container">
			  <view
			  :id="`cont_${index + 1}`"
			  class="cont-box"
			  :style="{ width: widthCalc, 'margin-left': index === 0 ? 0 : marginCalc }"
			  v-for="(numVal, index) in flowData.column"
			  :key="numVal"
			  >
				  <view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="item.id">
					  <image class="img-tip" :style="{height:iitem.postPicture[0].pricturePath == undefined ? '0':auto}" :src="item.postPicture[0].pricturePath == undefined ?'/static/info.png':item.postPicture[0].pricturePath" mode="widthFix" :data-item="item" :data-idx="j" @load="imgLoad" @error="imgError" @click="checkDetails"/>
					  <view class="listtitle">
						  <view class="listtitle1" :data-item="item" @click="checkDetails">{{ item.postContent == null ? 0 : item.postContent }}</view>
						  <view class="userinfo">
							  <view class="userinfoDetail" :data-item="item" @click="checkDetails()">
								  <image class="avatarInfo" :src="item.headPortrait != null ?  item.headPortrait : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'" mode="aspectFill" lazy-load="true" ></image>
								  <view class="username">{{ item.nickname == null ? 0 : item.nickname}}</view>
							  </view>
							  <view class="likeWrap">
								  <image data-columnsInfo="index"  :data-item="item" @click="addLike" class="like" :src="item.like == 1 ? getImgUrl('/img/allImgs/home/like.svg'):getImgUrl('/img/allImgs/home/unHeart.svg')" mode="aspectFill"></image>
								  <view class="likeCount">{{ item.numberLikes == null ? 0 : item.numberLikes }}</view>
							  </view>
						  </view>
						  <view class="timeInfo">{{  item.releaseTime }}</view>
  
					  </view>
				  </view>
			  </view>
		  </view>
	  </view>
	  <!-- 底部tab -->
	  <!-- flag等于几取决于组件页面的id -->
	  <tablebox class="flex:none" flag="1"></tablebox>
	</view> 
</template>
  <script>
  import tablebox from '../../../components/tabBox.vue';
  import Progress from '../../../pages/component/progress.vue'
  import { baseURL } from '../../../utils/baseUrl';
  import { imgBaseUrl, socketURL } from '../../../utils/baseUrl'
  import { showInfoFunc } from '../../../utils/common'
  import { getHomeListAPI, getHoroscopeAPI, addLikeAPI, byCodeGetUserAPI, notebookAPI, showAPI } from '../../../utils/api';
  let loadBtm = true
  
  export default {
	components: {
	  tablebox,
	  Progress
	},
	data(){
		return {
			idx:0,
			token:false, //判断是否已经登录
			show:false, // 是否展示新增内容
			everyDayShow: false,
			baseURL:'',
			avatar:'',
			searchVls:'',
			wishingShow: false,
			divinationShow: false,
			votiveShow: false,
			constellation: false,
			run:true,
			flowData: {
			  list: [], // 数据值
			  column: 2, // 瀑布列数
			  columnSpace: 2 // 瀑布列宽间距
			},
			tabs1:[],
			addArr:[ // 邀请信息
			  {
				  img: imgBaseUrl +'/img/allImgs/home/weChat.svg',
				  title:'邀请好友填档案',
			  },{
				  img:imgBaseUrl + '/img/allImgs/home/user.svg',
				  title:'我的档案',
				  url:'../../../subPackagesA/pages/addRecord/addRecord',
			  },{
				  img:imgBaseUrl + '/img/allImgs/home/share2.svg',
				  title:'档案分享',
			  }
			],
			menuData: [ //运势信息 固定
				{
				  menuImg: imgBaseUrl + '/img/allImgs/home/name.svg',
				  url:'../../../subPackagesA/pages/addBaseInfo/addBaseInfo',
				  menu:'起名',
				  show: false
				},{
				  menuImg: imgBaseUrl + '/img/allImgs/home/text.svg',
				  url:'../../../subPackagesA/pages/glyphomancy/glyphomancy',
				  menu:'测字',
				  show: false
				},{
				  menuImg: imgBaseUrl + '/img/allImgs/home/random.svg',
				  url:'../../../subPackagesA/pages/lots/lots',
				  menu:'抽签',
				  show: false
				},{
				  menuImg: imgBaseUrl + '/img/allImgs/home/dream.svg',
				  url:'../../../subPackagesA/pages/dreams/dreams',
				  menu:'解梦',
				  show: false
				},{
				  menuImg: imgBaseUrl + '/img/allImgs/home/river.svg',
				  url:'../../../subPackagesA/pages/missriver/missriver',
				  menu:'思念河',
				  show: false
				},
			],
			progressData:[
			  {
				  img:  imgBaseUrl + '/img/allImgs/home/love.svg',
				  name:'爱情',
				  progressPercent: 0,
  
			  },{
				  img:  imgBaseUrl + '/img/allImgs/home/work.svg',
				  name:'事业',
				  progressPercent: 0
			  },{
				  img:  imgBaseUrl + '/img/allImgs/home/money.svg',
				  name:'财富',
				  progressPercent:0
			  }
			],
			comList: [], //商品列表
			current: 2,
			percent:0,
			pageNo:1,// 上拉加载
			info:{
			  colorPicture: '',
			  constellation: "",
			  constellationPicture: '',
			  day: "19",
			  enterprise: 86,
			  health: 98,
			  id: "1",
			  love: 0,
			  luckyColor: "无",
			  luckyNumberPicture:'',
			  money: 0,
			  month: "05",
			  number: '无',
			  qfriend: "",
			  summary: "",
			  todaySIndex: 0,
			  type: "today",
			  year: "2023",
			},
		}
	},
	onLoad(){
		this.flowData.list = [];
		this.show = false;
		this.baseURL = baseURL;
		let loading = uni.getStorageSync('loading');
		if(loading){
			this.getLoginInfo();
		}else{
			this.getUserInfo();
		}
	},
	onShow(){
		var pages = getCurrentPages();
		var currPage = pages[pages.length - 1]; //当前页面
		let res = currPage.data.userdata;
		if(res != undefined){
			if(res.current == 1){
				this.$set(this.flowData.column_1[res.colIdx],'like',res.like)
				this.$set(this.flowData.column_1[res.colIdx],'numberLikes',res.numberLikes)
			}else{
				this.$set(this.flowData.column_2[res.colIdx],'like',res.like)
				this.$set(this.flowData.column_2[res.colIdx],'numberLikes',res.numberLikes)
			}
		}
		 	 
	},
	computed: {
	  /* 计算列宽 */
	  widthCalc() {
		return `${100 / this.flowData.column - this.flowData.columnSpace}%`;
	  },
	  /* 计算 margin 外边距 */
	  marginCalc() {
		const columnWidth = 100 / this.flowData.column - this.flowData.columnSpace;
		return `${(100 - columnWidth.toFixed(5) * this.flowData.column) / (this.flowData.column - 1)}%`;
	  }
	},
	onReachBottom(){
	  if(this.run){
		  if(loadBtm){
			  loadBtm = false
			  this.pageNo++;
			  this.getHomeList();
			  setTimeout(() => {
				  loadBtm = true
			  }, 1000);
		  }
		  
	  }
	},
	created() {
	  /* 初始化每一列的数据 */
	  for (let i = 1; i <= this.flowData.column; i++) {
		this.$set(this.flowData, `column_${i}`, []);
	  }
	},
	methods: {
	  /* 获取最小值的对象 */
	  getMinObj(a, s) {
		let m = a[0][s];
		let mo = a[0];
		for (let i = a.length - 1; i >= 0; i--) {
		  if (a[i][s] < m) m = a[i][s];
		}
		mo = a.filter(i => i[s] === m);
		return mo[0];
	  },
	  /* 计算每列的高度 */
	  getMinColumnHeight() {
		return new Promise(resolve => {
		  const heightArr = [];
		  for (let i = 1; i <= this.flowData.column; i++) {
			uni
			  .createSelectorQuery()
			  .in(this)
			  .select(`#cont_${i}`)
			  .boundingClientRect(res => {
				heightArr.push({ column: i, height: res.height });
			  })
			  .exec(() => {
				if (this.flowData.column <= heightArr.length) {
				  resolve(this.getMinObj(heightArr, "height"));
				}
			  });
		  }
		});
	  },
	  /* 初始化瀑布流数据 */
	  async initValue(i) {
		this.idx = i;
		if (i >= this.flowData.list.length) return false;
		const minHeightRes = await this.getMinColumnHeight();
		this.flowData[`column_${minHeightRes.column}`].push({
		  ...this.flowData.list[i],
		  index: i
		});
	  },
	  /* 图片加载完成 */
	  imgLoad(e) {
		  const i = e.target.dataset.item.index;
			this.$nextTick(() => {
			  this.initValue(i + 1); // 加载下一条数据
		  });
		
	  },
	  /* 图片加载失败 */
	  imgError(e) {
		const i = e.target.dataset.item.index;
		this.$nextTick(() => {
			  this.initValue(i + 1); // 加载下一条数据
		  });
	  },
	  // 获取tabs信息
	  async getTbar1() {
		  try {
			  const res = await notebookAPI();
			  if (this.tabs1.length < 4) {
				  let arr = res.result.manualValues.slice(0, 4)
				  this.tabs1 = arr
			  } else {
				  this.tabs1 = res.result.manualValues
			  }
		  } catch (error) {
	  
		  }
	  },
	  // 回车搜索
	  searchFun(){
		  uni.navigateTo({
			  url:`/subPackagesA/pages/forumList/forumList?seachVls=${encodeURIComponent(this.searchVls)}&tabs=${JSON.stringify(this.tabs1)}&type=0`
		  })
		  this.searchVls = ''
	  },
	  
	  // 获取登录信息
	  async getLoginInfo(){
		  const _this = this;
		  try {
			  uni.login({    
				  success: async function(res) {    
					  const result = await byCodeGetUserAPI(res.code);
					  if(result.code == 200){
						  uni.setStorageSync('token', result.result.token);
						  uni.setStorageSync('userInfo',result.result.userInfo)
						  uni.setStorageSync('userId',result.result.userInfo.id);
						  uni.setStorageSync('phone', result.result.userInfo.phone);
						  uni.setStorageSync('openid', result.result.openid);
						  uni.setStorageSync('loading', false);
						  // const showInfo = await showAPI();
						  // console.log("showInfo执行")
						  // uni.setStorageSync('showInfo',showInfo.result)
						  _this.getUserInfo();
						  // socket连接
						  uni.connectSocket({
							  url: socketURL + `/websocket/${result.result.userInfo.id}`,
							  header:{
								  'content-type': 'application/json',
								  'X-Access-Token':uni.getStorageSync("token") || ""
							  },
							  success() {
								  console.log('WebSocket连接成功');
								  uni.onSocketOpen(function (res) {
									  console.log('WebSocket连接已打开！');
								  });
								  uni.onSocketError(function (res) {
									  console.log('WebSocket连接打开失败，请检查！',res);
								  });
								  
							  },
							  fail(err) {
								  console.error('WebSocket连接失败', err);
							  }
						  });
						  uni.onSocketOpen(function (res) {
							  console.log('WebSocket连接已打开！',res);
						  });
						  uni.onSocketClose(function (res) {
							  console.log('WebSocket 已关闭！',res);
						  });
					  }
				  }  
			  });  
				  
			  } catch (error) {
				  console.error('登录异常', error);
			  }
	  },
	  // 获取用户信息
	  async getUserInfo(){	
		  this.getHoroscope();
		  this.getHomeList();
		  this.getTbar1();
		  const showInfo = await showAPI();
		  uni.setStorageSync('showInfo',showInfo.result)
		  const wishing = showInfoFunc('许愿池')
		  const divination = showInfoFunc('排盘摇卦')
		  const votive = showInfoFunc('还愿池')
		  const name = showInfoFunc('起名')
		  const testFont = showInfoFunc('测字')
		  const draw = showInfoFunc('抽签')
		  const dream = showInfoFunc('解梦')
		  const think = showInfoFunc('思念河')
		  const constellation = showInfoFunc("星座运势")
		  const everyday = showInfoFunc("每日一测")
  
		  this.constellation = constellation == undefined ? false: true
		  this.everyDayShow =  everyday ==  undefined ? false: true
  
		  this.menuData[0].show = name == undefined ? false: true
		  this.menuData[1].show = testFont == undefined ? false: true
		  this.menuData[2].show = draw == undefined ? false: true
		  this.menuData[3].show = dream == undefined ? false: true
		  this.menuData[4].show = think == undefined ? false: true
  
		  this.wishingShow = wishing == undefined ? false: true
		  this.divinationShow = divination == undefined ? false: true
		  this.votiveShow = votive == undefined ? false: true
  
	  },
	  
	  // 排盘摇卦
	  divination(){
		  if(this.divinationShow){
			  uni.navigateTo({
				  url:`../../../subPackagesA/pages/divination/divination`
			  })
		  }
	  },
	  // 跳转详情
	  checkDetails(e){
		const { column_1, column_2} = this.flowData
		  let { id,numberLikes,like } = e.target.dataset.item;
		  let colIdx = 0;
		  let current = 0;
		  column_1.map((item,idx) => {
			  if(item.id == id){
				  colIdx = idx
				  current = 1
			  }
		  })
		  column_2.map((item,idx) => {
			  if(item.id == id){
				  colIdx = idx
				  current = 2
			  }
		  })
			//   let params = {}
			//   if(like == 1){
			// 	  params = {
			// 		  id,
			// 		  like:0,
			// 		  numberLikes: numberLikes-1
			// 	  	}
  
			//   }else{
			// 	  params = {
			// 		  id,
			// 		  like:1,
			// 		  numberLikes: numberLikes+1
			// 	  }
			//   }
			//   await addLikeAPI(params);
			//   if(current == 1){
			// 	  this.$set(this.flowData.column_1[colIdx],'like',params.like)
			// 	  this.$set(this.flowData.column_1[colIdx],'numberLikes',params.numberLikes)
			//   }else{
			// 	  this.$set(this.flowData.column_2[colIdx],'like',params.like)
			// 	  this.$set(this.flowData.column_2[colIdx],'numberLikes',params.numberLikes)
			//   }
		  uni.navigateTo({
			  url:`../../../subPackagesA/pages/homeDetails/homeDetails?id=${e.target.dataset.item.id}&colIdx=${colIdx}&current=${current}&like=${like}`
		  })
	  },
	  // 图片渲染
	  getImgUrl(image){
		  return imgBaseUrl+image;
	  },
  
	  // 帖子点赞
	  async addLike(e){
		  const { column_1, column_2} = this.flowData
		  let { id,numberLikes,like } = e.target.dataset.item;
		  let colIdx = 0;
		  let current = 0;
		  column_1.map((item,idx) => {
			  if(item.id == id){
				  colIdx = idx
				  current = 1
			  }
		  })
		  column_2.map((item,idx) => {
			  if(item.id == id){
				  colIdx = idx
				  current = 2
			  }
		  })
		  try {
			  let params = {}
			  if(like == 1){
				  params = {
					  id,
					  like:0,
					  numberLikes: numberLikes-1
				  	}
  
			  }else{
				  params = {
					  id,
					  like:1,
					  numberLikes: numberLikes+1
				  }
			  }
			  await addLikeAPI(params);
			  if(current == 1){
				  this.$set(this.flowData.column_1[colIdx],'like',params.like)
				  this.$set(this.flowData.column_1[colIdx],'numberLikes',params.numberLikes)
			  }else{
				  this.$set(this.flowData.column_2[colIdx],'like',params.like)
				  this.$set(this.flowData.column_2[colIdx],'numberLikes',params.numberLikes)
			  }
			  
  
		  } catch (error) {
			  
		  }
	  },
  
	  // 帖子列表
	  async getHomeList(){
		  try {
			  const params = {
				  orderByType:'',
				  pageNo:this.pageNo,
				  postState:0,
			  }
			  const res = await getHomeListAPI(params);
			  if(res.result.records.length < 10){
				  this.run = false
			  }
			  this.flowData.list = [...this.flowData.list,...res.result.records]; 
			  if(this.pageNo == 1){
				  this.$nextTick(() => {
					  this.initValue(0);
				  });  
			  }else{
				  this.$nextTick(() => {
					if(this.idx + 1 == (this.pageNo * 10) -9){
						this.initValue((this.pageNo * 10) -9);
					}
				  });
			  }
			  
  
		  } catch (error) {
			  console.error('帖子列表报错了',error)
		  }
	  },
  
	  // 获取星座运势
	  async getHoroscope(){
		  const userinfo = uni.getStorageSync('userInfo')
		  const res = await getHoroscopeAPI(userinfo.birthday);
		  if(res.result != null){
			  this.avatar = userinfo.avatar
			  this.progressData[0].progressPercent = res.result.love
			  this.progressData[1].progressPercent = res.result.enterprise
			  this.progressData[2].progressPercent = res.result.money
			  res.result.colorPicture = `${res.result.colorPicture}`
			  res.result.constellationPicture = `${res.result.constellationPicture}`
			  res.result.luckyNumberPicture = `${res.result.luckyNumberPicture}`
			  this.percent = parseInt(res.result.todaySIndex/5);
			  res.result.todaySIndex = res.result.todaySIndex;
			  this.info = res.result
		  }
		  
	  },
	  // 每日一测，跳转链接
	  changeUrl(url) {
		  if(this.toLogin()){
			  uni.navigateTo({url})
		  }
	  },
	  // 是否展示新增内容
	  showNav(){
		  this.show = !this.show;
	  },
	  // 跳转登录页面
	  toLogin(){
		  let phone = uni.getStorageSync("phone")
		  let flag = true
		  if(!phone){
			  flag = false
			  uni.reLaunch({
				  url:"/pages/tabbar/login/login"
			  })
		  }
		  return flag
	  },
	  // tab切换
	  changeTab(tab){
		  this.current = tab
	  },
	  //许愿池页面跳转
	  wishing(){
		  if(this.wishingShow){
			  uni.navigateTo({
				  url:`../../../subPackagesA/pages/wshingwell/wshingwell`
			  })
		  }
		  
	  },
	  //还愿池页面跳转
	  votive(){
		  if(this.votiveShow){
			  uni.navigateTo({
				  url:`../../../subPackagesA/pages/votivepd/votivepd`
			  })
		  }
	  }
	},
  };
  </script>
  <style lang="less">
  .likeCount{
	width: 60rpx;
  }
  .container {
	padding: 20rpx;
	margin-bottom: 120rpx;
	.cont-box {
	  border-radius: 12rpx;
	  float: left;
	  padding-bottom: 120rpx;
	  .item-box {
		width: 100%;
	  //   padding-bottom: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 8rpx;
		box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
		.img-tip {
		  width: 100%;
		  border-radius: 8rpx 8rpx 0 0;
		}
		.tit-tip {
		  text-align: justify;
		  font-size: 30rpx;
		  padding: 10rpx 20rpx 0;
		  font-weight: 900;
		}
		.desc-tip {
		  text-align: justify;
		  font-size: 26rpx;
		  padding: 5rpx 20rpx 0;
		  margin-top: 10rpx;
		}
	  }
	}
  }
  
  .timeInfo{
	  color: #888888;
	  margin-top: 10rpx;
	  font-size: 10px;
  }
  
  
	  @bannerImg: 'https://ctrlsoft.net.cn/app_static/hesaid/img/banner.svg';
	  @chooseTabImg:'https://ctrlsoft.net.cn/app_static/hesaid/img/menuShow.png';
	  *{
		  margin: 0;
		  padding: 0;
	  }
  
	  .tabNavWrap{
		  float: right;
		  margin-right: 20rpx;
		  padding: 20rpx 30rpx 20rpx 30rpx;
		  text-align: center;
		  line-height: 20px;
		  background-color: #fff;
		  position: relative;
		  z-index: 99999999;
		  border-radius: 10rpx;
		  &::after{
			  content: "";
			  position: absolute;
			  width: 20rpx;
			  height:20rpx;
			  background-color: #fff;
			  transform: rotate(45deg);
			  right: 30rpx ;
			  top: -10rpx;
			  z-index: 99999999;
		  }
		  .tabs{
			  display: flex;
			  // justify-content: space-between;
			  align-items: center;
			  height: 80rpx;
			  image{
				  width: 42rpx;
				  height: 42rpx;
				  margin-right: 20rpx;
			  }
			  .tabInfo{
				  font-size: 32rpx;
				  font-family: PingFangSC-Regular, PingFang SC;
				  font-weight: 400;
				  color: #222229;
			  }
		  }
	  }
	  
	 
	  .wrap{
		  background-color: #F6F6F6;
	  }
	  .listtitle {
				  padding: 20rpx;
				  font-size: 24rpx;
				  color: #222222;
				  .userinfo{
					  margin-top: 20rpx;
					  display: flex;
					  justify-content: space-between;
					  align-items: center;
					  color: #888888;
					  font-weight: 300;
					  .userinfoDetail{
						  display: flex;
						  align-items: center;
						  image{
							  width: 40rpx;
							  height: 40rpx;
							  border-radius: 50%;
							  margin-right: 10rpx;
						  }
					  }
					  .likeWrap{
						  display: flex;
						  image{
							  width: 36rpx;
							  height: 36rpx;
							  margin-right: 10rpx;
						  }
					  }
  
				  }
				  .listtitle1 {
					  line-height: 39rpx;
					  text-overflow: -o-ellipsis-lastline;
					  overflow: hidden;
					  text-overflow: ellipsis;
					  display: -webkit-box;
					  -webkit-line-clamp: 2;
					  line-clamp: 2;
					  -webkit-box-orient: vertical;
					  min-height: 39rpx;
					  max-height: 78rpx;
				  }
			  }
  
	  // 第四个模块 整体内容
	  .containerWrap{
		  width: 100%;
		  // padding-bottom: 130rpx;
		  background-color: #fff;
		  position: relative;
		  border: none;
		  .pubuBox {
			  padding: 20rpx;
			  .pubuItem {
				  column-count: 2;
				  column-gap: 20rpx;
				  .item-masonry {
					  box-sizing: border-box;
					  border-radius: 15rpx;
					  overflow: hidden;
					  background-color: #F5F5F5;
					  break-inside: avoid;
					  /*避免在元素内部插入分页符*/
					  box-sizing: border-box;
					  margin-bottom: 20rpx;
					  // box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
				  }
  
				  .item-masonry image {
					  width: 100%;
					  border-radius: 10rpx;
				  }
			  }
			  .listtitle {
				  padding: 20rpx;
				  font-size: 24rpx;
				  color: #222222;
				  .userinfo{
					  margin-top: 20rpx;
					  display: flex;
					  justify-content: space-between;
					  color: #888888;
					  font-weight: 300;
					  .userinfoDetail{
						  display: flex;
						  align-items: center;
						  image{
							  width: 40rpx;
							  height: 40rpx;
							  border-radius: 50%;
							  margin-right: 10rpx;
						  }
					  }
					  .likeWrap{
						  display: flex;
						  image{
							  width: 36rpx;
							  height: 36rpx;
							  margin-right: 10rpx;
						  }
					  }
  
				  }
				  .listtitle1 {
					  line-height: 39rpx;
					  text-overflow: -o-ellipsis-lastline;
					  overflow: hidden;
					  text-overflow: ellipsis;
					  display: -webkit-box;
					  -webkit-line-clamp: 2;
					  line-clamp: 2;
					  -webkit-box-orient: vertical;
					  min-height: 39rpx;
					  max-height: 78rpx;
				  }
			  }
  
  
		  }
  
	  
  
	 
  
	  
		  .warn{
			  text-align: center;
			  font-size: 24rpx;
			  font-family: PingFangSC-Regular, PingFang SC;
			  font-weight: 400;
			  color: #888888;
			  margin: 20rpx auto;
		  }
		  .tabWrap{
			  display: flex;
			  align-items: center;
			  justify-content: space-around;
			  width: 100%;
			  background-color: #F6F6F6;
			  height: 60rpx;
			  font-size: 28rpx;
			  font-family: PingFangSC-Regular, PingFang SC;
			  font-weight: 400;
			  color: #555555;
			  .tabs{
				  position: relative;
				  z-index: 999;
			  }
		  }
		  .chooseTab{
			  position: absolute;
			  right: 80rpx;
			  width: 240rpx;
			  height: 60rpx;
			  background-color: #F7F1CD;
			  z-index: 100;
			  background: url(@chooseTabImg);
		  }
	  }
  
	  // 第三个模块 图片
	  .advertisingImg{
		  width: calc(100% - 40rpx);
		  padding: 20rpx 20rpx 0 20rpx;
		  height: 130rpx;
	  }
  
	  // 第二个模块 个人时运
	  .details{
		  width: calc(100% - 40rpx);
		  margin: 0 20rpx;
		  background-color: #fff;
		  border-radius: 10rpx;
		  padding-bottom: 20rpx;
		  .desc{
			  margin-left: 30rpx;
			  margin-top: 20rpx;
			  font-size: 24rpx;
			  font-family: PingFangSC-Regular, PingFang SC;
			  font-weight: 400;
			  color: #000000;
		  }
		  .luckyWrap{
			  margin-top: 40rpx;
			  display: flex;
			  justify-content: space-around;
			  align-items: center;
			  .vertical{
					  width: 1px;
					  height: 30rpx;
					  opacity: 0.3;
					  background-color: #000000;
				  }
			  .luckyColorWrap{
				  display: flex;
				  align-items: center;
				  .luckyColorImg{
					  width: 40rpx;
					  height: 40rpx;
				  }
				  .luckyColorInfoWrap{
					  margin-left: 10rpx;
					  .luckyColor{
						  font-size: 20rpx;
						  font-family: PingFangSC-Regular, PingFang SC;
						  font-weight: 400;
						  color: #000000;
					  }
					  .luckyColorDetail{
						  font-size: 20rpx;
						  font-family: PingFangSC-Regular, PingFang SC;
						  font-weight: 400;
						  color: rgba(0, 0, 0, .5);
					  }
				  }
				  
			  }
			  
		  }
		  .progressWrap{
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  .detailsLeft{
				  width: 50%;
				  padding-left: 20rpx;
				  .luckInfo{
					  width: 100%;
					  display: flex;
					  align-items: flex-end;
					  .luckImg{
						  width: 36rpx;
						  height: 36rpx;
					  }
					  .progressDetails{
						  width: 100%;
						  margin-left: 20rpx;
						  margin-top: 10rpx;
						  .progressDesc{
							  display: flex;
							  justify-content: space-between;
							  color: #222222;
							  font-size: 20rpx;
						  }
					  }
				  }
  
			  }
			  .detailsRight{
				  width: 40%;
				  height: 160rpx;
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  // background-color: #FF7C0B;
				  .dashWrap{
					  width: 90%;
					  height: 140rpx;
					  border-radius: 160rpx 160rpx 0 0;
					  position: relative;
					  // display: flex;
					  // align-items: center;
					  // justify-content: center;
					  .count{
						  position: absolute;
						  width: 100%;
						  text-align: center;
						  margin-top: 34rpx;
						  font-size: 100rpx;
						  font-weight: 700;
						  margin-left: -5%;
					  }
					  .forBlock{
						  width: 12rpx;
						  height: 18rpx;
						  position: absolute;
						  background-color:#FCE8D5;
						  line-height: 40px;
						  text-align: center;
						  left: 50%;
						  margin-left: -20rpx;
						  margin-top: -20rpx;
						  transform-origin:10rpx 140rpx;
					  }
				  }
			  }
		  }
		  .user{
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  padding: 20rpx 20rpx 20rpx 0;
			  .userLuck{
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  .avatar{
					  width: 56rpx;
					  height: 56rpx;
					  border-radius: 50%;
					  margin-right: 10rpx;
				  }
				  .userInfo{
					  font-size: 28rpx;
					  font-family: PingFangSC-Medium, PingFang SC;
					  font-weight: 500;
					  color: #222222;
				  }
				  .changeImg{
					  width: 36rpx;
					  height: 36rpx;
					  margin: 0 10rpx;
				  }
				  .timeLuck{
					  font-size: 24rpx;
					  font-family: PingFangSC-Regular, PingFang SC;
					  font-weight: 400;
					  color: #222222;
				  }
			  }
			  .shareImg{
				  width: 28rpx;
				  height: 28rpx;
			  }
			  
		  }
  
	  }
  
	  // 顶部第一个模块
	  .bannerSyl{
		  height: 600rpx;
		  background-image: linear-gradient(#FF7C0B, #FFD90B,#F7F1CD);
		  overflow: hidden;
		  position: relative;
		  .searchWrap{
			  padding: 20rpx 40rpx 20rpx 40rpx;
			  margin-top: 140rpx;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  .searchInfo{
				  // width: 486rpx;
				  width: 100%;
				  height: 56rpx;
				  line-height: 56rpx;
				  background: #FFFFFF;
				  border-radius: 28rpx;
				  display: flex;
				  color: #AAAAAA;
				  font-size: 28rpx;
				  .searchPlace{
					  width: 80rpx;
					  margin-left: 20rpx;
				  }
				  .line{
					  width: 2rpx;
					  height: 32rpx;
					  background-color: #AAAAAA;
					  margin-top: 12rpx;
					  margin-left: 10rpx;
				  }
				  .searchIpt{
					  padding-top: 6rpx;
					  margin-left: 10rpx;
					  position: relative;
					  z-index: 1000000;
				  }
			  }
			  .sign{
				  position: relative;
				  z-index: 99999999999;
				  width: 46rpx;
				  height: 46rpx;
			  }
		  }
		  
		  .bannerImg{
			  background: url(@bannerImg) no-repeat;
			  background-size: 100% 100%;
			  width: 100%;
			  height: 400rpx;
			  margin-top: -120rpx;
			  position: relative;
			  .wishing{
				  width: 146rpx;
				  height: 84rpx;
				  position: absolute;
				  top: 144rpx;
				  left: 40rpx;
			  }
			  .divinatory{
				  width: 240rpx;
				  height: 96rpx;
				  position: absolute;
				  top: 120rpx;
				  left: 50%;
				  margin-left: -120rpx;
			  }
			  .votive{
				  width: 146rpx;
				  height: 84rpx;
				  position: absolute;
				  top: 144rpx;
				  right: 40rpx;
			  }
		  }
		  .btnImg{
			  padding: 4rpx 36rpx;
			  color: #FFFFFF;
			  background-color: aqua;
			  text-align: center;
			  position: absolute;
			  bottom: 120rpx;
			  font-size: 28rpx;
			  background: url(https://ctrlsoft.net.cn/app_static/hesaid/img/forum/btn.svg) no-repeat;
			  background-size: cover;
			  background-position: center center;
		  }
		  .centerImg{
			  text-align: center;
			  padding: 10rpx 64rpx;
			  background: url() no-repeat;
  
			  background-size: cover;
			  background-position: center center;
		  }
		  .bannerMenu{
			  position: absolute;
			  bottom: 16rpx;
			  width: calc(100% - 40rpx);
			  margin: 0 20rpx 0 20rpx;
			  background: #fff;
			  border-radius: 10rpx
		  }
		  .menuTitle{
			  font-size: 24rpx;
			  font-family: PingFangSC-Medium, PingFang SC;
			  font-weight: 500;
			  color: #222222;
			  margin-top: 16rpx;
			  margin-left: 24rpx;
		  }
		  .menuList{
			  display: flex;
			  // justify-content: space-between;
			  margin: 0 40rpx;
			  font-size: 24rpx;
			  font-family: PingFangSC-Regular, PingFang SC;
			  font-weight: 400;
			  color: #222222;
		  }
		  .menuImg{
			  text-align: center;
			  margin: 10rpx 22rpx;
		  }
	  }
	  image{will-change: transform}
  </style>